<template>
  <div class="news-container">
    <div class="main-info-title fs18 flex flex-row-center">
      <span>新闻头条</span>
      <el-button type="primary" style="margin-left: auto" @click="addNews">
        新建新闻
      </el-button>
    </div>
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="2"
      @search="search"
      @reset="reset"
      @export="handleExport"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :table-column="tableColumn"
      :btn-option="btnOption"
      :table-data="tableData"
      @page-click="pageClick"
    ></HHtable>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogTableVisible"
      width="500px"
      :lock-scroll="false"
      @closed="handleDialogClose"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        label-position="left"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="abstract">
          <el-input
            v-model="form.abstract"
            placeholder="请输入摘要"
            type="textarea"
            :rows="3"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <el-upload
            class="avatar-uploader"
            action="#"
            list-type="picture-card"
            :file-list="form.cover"
            :limit="1"
            accept="image/jpg, image/jpeg,image/png"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">
              建议上传1:1尺寸图片，避免显示不全
              <strong style="color: red">(只能上传一张图片)</strong>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章链接" prop="articleLink">
          <el-input
            v-model="form.articleLink"
            placeholder="请输入文章链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-container flex flex-center">
        <el-button type="primary">保存</el-button>
        <el-button @click="handleDialogClose">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        total: 500,
        dialogTableVisible: false,
        dialogTitle: '新建新闻',
        form: {
          title: '',
          abstract: '',
          articleLink: '',
          cover: [],
        },
        rules: {
          title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' },
          ],
          abstract: [
            { required: true, message: '请输入摘要', trigger: 'blur' },
          ],
          articleLink: [
            { required: true, message: '请输入文章链接', trigger: 'blur' },
          ],
          cover: [{ required: true, message: '请上传封面' }],
        },
        tableColumn: [
          {
            prop: 'name',
            label: '显示排序',
          },
          {
            prop: 'phone',
            label: '标题',
          },
          {
            prop: 'wxCode',
            label: '摘要',
          },
          {
            prop: 'score',
            label: '封面',
          },
          {
            prop: 'region',
            label: '创建时间',
          },
          {
            prop: 'type',
            label: '状态',
          },
        ],
        tableData: [
          {
            name: 'ydw',
            phone: '15766313400',
            wxCode: '15766313400',
            score: '562',
            rank: '100',
            sex: '男',
            certificate: '中级',
            region: '广东',
            place: '广州',
            academy: '水利',
            specialty: '计算机',
            createTime: '2020-10-10 18:00:12',
          },
        ],
        searchOptions: [
          {
            type: 'text',
            prop: 'userName',
            span: 5,
            label: '标题：',
            placeholder: '请输入搜索',
          },
          {
            type: 'text',
            prop: 'cellPhone',
            label: '摘要：',
            span: 5,
            placeholder: '请输入搜索',
          },
          {
            type: 'date',
            prop: 'time',
            label: '创建日期：',
            span: 5,
            placeholder: '请选择日期',
          },
          {
            type: 'select',
            prop: 'status',
            label: '状态：',
            span: 5,
            placeholder: '请输入搜索',
            arr: [
              {
                label: '新的',
                value: '0',
              },
              {
                label: '旧的',
                value: '1',
              },
            ],
          },
        ],
        btnOption: [
          {
            type: 'primary',
            size: 'mini',
            text: '修改',
            show: true,
            func: this.editor,
          },
          {
            type: 'danger',
            size: 'mini',
            text: '删除',
            show: true,
            func: this.delete,
          },
        ],
      }
    },
    methods: {
      addNews() {
        this.dialogTitle = '新建新闻'
        this.form = {
          title: '',
          abstract: '',
          articeLink: '',
          cover: [],
        }
        setTimeout(() => {
          this.dialogTableVisible = true
        }, 200)
      },
      handleDialogClose() {
        this.form.cover = []
        this.$refs.form.resetFields() // 重置表单校验
        this.dialogTableVisible = false
      },
      search() {
        console.log('搜索')
      },
      reset() {
        console.log('重置')
      },
      handleExport() {
        console.log('导出')
      },
      pageClick() {
        console.log('翻页')
      },
      editor() {
        console.log('修改')
      },
      delete() {
        console.log('删除')
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/common.css';
  .news-container {
    .main-info-title {
      position: relative;
      height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;

      &:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        content: '';
        background-color: #409eff;
        border-radius: 3px;
        transition: all 0.5s ease;
      }

      &:hover:after {
        width: 120px;
      }
    }
  }
</style>
